<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <script type="text/javascript" src="static/js/index.js"></script>
    <link rel="stylesheet" href="static/css/index.css">
</head>

<style>
    .el-table .warning-row {
        background: rgb(126, 238, 35);
    }

    .el-table .success-row {
        background: #f0f9eb;
    }

    /*
    包裹表格div的距離外邊距的距離
    width:85% 為寬度
    margin：為左边距
    margin-top為右边距
    */

    #app {
        width: 100%;
    }
</style>

<body>
<div id="app">
<div id="searchmsg">
    <template>
        <el-row class="demo-autocomplete">
            <el-col :span="6">
                订单编号：
                <el-input v-model="pm.num" clearable placeholder="请输入" size="small" style="width: 180px"></el-input>
            </el-col>
            <el-col :span="6">
                借款客户：
                <el-input v-model="pm.name" clearable placeholder="请输入" size="small"  style="width: 180px"></el-input>
            </el-col>
            <el-col :span="6">
                放款状态：
                <el-select v-model="pm.status" clearable placeholder="请选择" size="small" style="width: 180px">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </el-col>
            <el-col :span="6">
                放款日期：
                <el-date-picker
                        v-model="pm.strDate"
                        type="date"
                        placeholder="选择日期"
                        value-format="yyyy-MM-dd"
                        size="small"
                        style="width: 180px">
                </el-date-picker>
            </el-col>
        </el-row>
        <br/><br/>
        <el-row>
            <el-col  :span="12"></el-col>
            <el-col  :span="6" style="float: right">
                <el-button type="primary" icon="el-icon-search" size="small" @click="querySearch()" >查询</el-button>
                <el-button type="primary" size="small" @click="upload()" ><i class="el-icon-upload el-icon--right"></i>&nbsp;&nbsp;导出</el-button>
            </el-col>
            <div style="clear: both"></div>
        </el-row>
        <br/><br/>
    </template>
</div>

<div id="maintable">
    <el-row>
    <!--table 模板  ：data 绑定了数据 tableData-->
    <template>
        <el-table
                :data="tableData"
                style="width: 100%"
                :header-cell-style="{'text-align':'center'}"
                :cell-style="{'text-align':'center'}">
            <el-table-column
                    prop="num"
                    label="订单号"
                    width="160">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="借款客户"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="newSumMoney"
                    label="放款金额"
                    width="160">
            </el-table-column>
            <el-table-column
                    prop="lendingType"
                    label="放款方式"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="lendingChannel"
                    label="放款通道"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="status"
                    label="放款状态"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="strDate"
                    label="放款时间"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="ditchAllname"
                    label="资金方"
                    width="160">
            </el-table-column>
        </el-table>
    </template>
    </el-row>
    <br><br>
    <el-row>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                @prev-click="handlePrevChange"
                @next-click="handleNextChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalCount"
                style="padding-left:250px;" >
        </el-pagination>
    </el-row>

</div>

</div>
</body>

<script type="text/javascript">




    let demo = new Vue({
        el: "#app",
        data() {
            return {
                // 总数据
                tableData:[],
                // 默认显示第几页
                currentPage:1,
                // 总条数，根据接口获取数据长度(注意：这里不能为空)
                totalCount:1,
                // 默认每页显示的条数（可修改）
                pageSize:10,

                options: [{
                    value: '等待放款',
                    label: '等待放款'
                }, {
                    value: '已放款',
                    label: '已放款'
                }, {
                    value: '逾期中',
                    label: '逾期中'
                }, {
                    value: '已结清',
                    label: '已结清'
                }, {
                    value: '已催收',
                    label: '已催收'
                }],


                //数据封装成类
                pm : {
                    num : '',
                    name : '',
                    newSumMoney : '',
                    lendingType : '',
                    lendingChannel : '',
                    status : '',
                    strDate : '',
                    ditchAllname : '',
                }
            };
        },
        methods: {
            //分页显示的方法和代码
            getData(){
                // 这里使用axios，使用时请提前引入
                axios.get("/cs/pminfo/select",{
                        params:{
                            limit:this.pageSize,
                            pageNum:this.currentPage,
                            offset:(this.currentPage-1)*this.pageSize,
                            num:this.pm.num,
                            name:this.pm.name,
                            status:this.pm.status,
                            strDate:this.pm.strDate
                        }
                    },{emulateJSON: true},
                    {
                        headers:{"Content-Type": "application/x-www-form-urlencoded;charset=utf-8",}
                    }
                ).then(reponse=>{
                    // 将数据赋值给tableData
                    this.tableData=reponse.data.rows

                    // 将数据的长度赋值给totalCount
                    this.totalCount=reponse.data.total
                })
            },
            // 分页
            // 每页显示的条数
            handleSizeChange(val) {
                // 改变每页显示的条数
                this.pageSize=val
                // 注意：在改变每页显示的条数时，要将页码显示到第一页
                this.currentPage=1
                this.getData()
            },
            // 显示第几页
            handleCurrentChange(val) {
                // 改变默认的页数
                this.currentPage=val
                this.getData()
            },
            // 前一页
            handlePrevChange(val){
                // 改变默认的页数
                this. currentPage=val
                this.getData()
            },
            // 后一页
            handleNextChange(val){
                // 改变默认的页数
                this. currentPage=val
                this.getData()
            },

            //查询
            querySearch(){
                this.currentPage=1
                this.getData()
            },

            //导出
            upload(){
            },

            //为鼠标移动上去的js样式
            tableRowClassName({row, rowIndex}) {
                if (rowIndex % 2 === 1) {
                    return 'success-row';

                } else if (rowIndex % 2 === 2) {
                    return 'warning-row';
                }
                return '';
            },

        },//method方法截止
        created : function () {  //挂载完成，就是页面内容加载完成后

            this.getData()


        }
    });


</script>

</html>